<!-- 企业使用列表 -->
<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-button type="primary"
                           class="handle-del mr10"
                           @click="addOrDeleteCompany('add')"
                           v-if="compAddOrDelete === 'add'">添加</el-button>
                <el-button type="primary"
                           icon="delete"
                           class="handle-del mr10"
                           @click="addOrDeleteCompany('delete')"
                           v-if="compAddOrDelete === 'delete'">批量删除</el-button>
                <el-button class="handSearchBut"
                           type="primary"
                           icon="search"
                           @click="search">搜索</el-button>
                <el-input v-model="select_word"
                          placeholder="请输入企业名称"
                          class="handle-input mr10"
                          @keyup.enter.native='search'></el-input>
            </div>
            <el-table :data="compList"
                      border
                      style="width: 100%"
                      ref="multipleTable"
                      @select-all="selectCompFn"
                      @select="selectCompFn"
                      v-if="compAddOrDelete === 'add'">
                <el-table-column type="selection"
                                 width="35"
                                 align='center'></el-table-column>
                <el-table-column prop="code"
                                 label="企业编号"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="name"
                                 label="企业名称"
                                 align='center'></el-table-column>
                <el-table-column prop="createDate"
                                 label="创建日期"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="upDate"
                                 label="更新日期"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="companyInfo"
                                 label="企业基本信息"
                                 align='center'></el-table-column>
                <el-table-column prop="type"
                                 label="企业行业类型"
                                 align='center'  :formatter='formatter'></el-table-column>
                <el-table-column label="企业属性"
                                 align='center'
                                 v-if="showCompBtn">
                    <template slot-scope="scope">
                        <div class="tabtdHover"
                             title="点击设置企业属性"
                             @click="showCompAttrDialog(scope.row,scope.row.id)">企业属性</div>
                    </template>
                </el-table-column>
                <el-table-column label="功能列表"
                                 align='center'
                                 v-if="showCompBtn">
                    <template slot-scope="scope">
                        <div class="tabtdHover"
                             title="点击添加功能"
                             @click="showCompFnDialog(scope.row.name,'add',scope.row.id)">添加功能</div>
                        <div class="tabtdHover"
                             title="点击查看已有功能"
                             @click="showCompFnDialog(scope.row.name,'delete',scope.row.id)">已有功能</div>
                    </template>
                </el-table-column>
            </el-table>
            <el-table :data="compList"
                      border
                      style="width: 100%"
                      ref="multipleTable"
                      @select-all="selectCompFn"
                      @select="selectCompFn"
                      v-else>
                <el-table-column type="selection"
                                 width="35"
                                 align='center'></el-table-column>
                <el-table-column prop="company.code"
                                 label="企业编号"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="company.name"
                                 label="企业名称"
                                 align='center'></el-table-column>
                <el-table-column prop="company.createDate"
                                 label="创建日期"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="company.upDate"
                                 label="更新日期"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="company.companyInfo"
                                 label="企业基本信息"
                                 align='center'></el-table-column>
                <el-table-column prop="company.type"
                                 label="企业行业类型"
                                 align='center'></el-table-column>
                <el-table-column prop="url"
                                 label="接口url"
                                 align='center'></el-table-column>
                <el-table-column label="企业属性"
                                 align='center'
                                 v-if="showCompBtn">
                    <template slot-scope="scope">
                        <div class="tabtdHover"
                             title="点击设置企业属性"
                             @click="showCompAttrDialog(scope.row,scope.row.id)">企业属性</div>
                    </template>
                </el-table-column>
                <el-table-column label="功能列表"
                                 align='center'
                                 v-if="showCompBtn">
                    <template slot-scope="scope">
                        <div class="tabtdHover"
                             title="点击添加功能"
                             @click="showCompFnDialog(scope.row.company.name,'add',scope.row.id)">添加功能</div>
                        <div class="tabtdHover"
                             title="点击查看已有功能"
                             @click="showCompFnDialog(scope.row.company.name,'delete',scope.row.id)">已有功能</div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="pageChange"
                               layout="prev, pager, next"
                               :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CompFunSet',
    data () {
        return {
            select_word: '', // 关键字搜索
            compList: [], // 企业列表
            selectComp: [], // 选中的企业集合
            currentPage: 1, // 当前所在第几页
            pageSize: 10, // 每页多少条
            total: 0, // 总页数
        }
    },
    props: {
        appId: Number,
        compAddOrDelete: String,
        closeFn: Function,
        showCompAttrDialog: Function, // 显示企业属性弹框
        showCompBtn: Boolean, // 是否显示操作按钮
        showCompFnDialog: Function, // 显示企业功能弹框
    },
    created () {
        this.getCompList()
    },
    methods: {
        search () {
            this.currentPage = 1
            this.selectComp = []
            this.getCompList()
        },
        selectCompFn (value) {
            this.selectComp[this.currentPage] = value
        },
        pageChange (value) {
            // 切换页数
            this.currentPage = value
            this.getCompList()
        },
        getCompList () {
            let sendData
            let url
            if (this.compAddOrDelete == 'add') {
                url = this.urlConfig.companyList
                sendData = {
                    pageNo: this.currentPage,
                    size: this.pageSize,
                    searchName: 'name',
                    searchValue: this.select_word
                }
            } else {
                url = this.urlConfig.companyByAppId
                sendData = {
                    appid: this.appId,
                    pageNo: this.currentPage,
                    size: this.pageSize,
                    searchValue: this.select_word // 关键字搜索
                }
            }
            this.fetch(url, sendData, 'get').then((response) => {
                this.total = response.data.total
                this.compList = response.data.records
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        addOrDeleteCompany (addOrDelete) {
            // 添加或者企业
            let sendData = {
                id: this.appId
            }

            if (addOrDelete == 'add') {
                sendData.companyIds = []
                this.selectComp.forEach(items => {
                    items.forEach(item => {
                        sendData.companyIds.push(item.id)
                    })
                })
                this.fetch(this.urlConfig.appInsertCompany, sendData, 'get').then((response) => {
                    if (response.code == 200) {
                        this.closeFn()
                    }
                    this.$message.success(response.message)
                }).catch((error) => {
                    this.$message.error(error.message);
                })
            } else {
                this.selectComp.forEach(items => {
                    items.forEach(item => {
                        sendData.appCompanyIds.push(item.id)
                    })
                })
                this.$alert('您确定删除选中的企业吗？', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.fetch(this.urlConfig.appDeleteCompany, sendData, 'get').then((response) => {
                            if (response.code == 200) {
                                this.closeFn()
                            }
                            this.$message.success(response.message);
                        }).catch(() => {

                        })
                    }
                });
            }
        },
        formatter (row, column, cellValue, index) {
            if (cellValue === 0) {
                return '行业1'
            }else if(cellValue === 1) {
                return '行业2'
            }else if(cellValue === 1){
                return '行业3'
            }
        }
    }
}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
    float: right;
}
.handSearchBut {
    float: right;
}
.del-dialog-cnt {
    font-size: 16px;
    text-align: center;
}
</style>
